import React from 'react'
import QR from 'query-string'
import './dt_details.css'

class Dt_Detail extends React.Component {
    constructor() {
        super()
        this.state = {
            comments: [],
            nickname: '',
            avatarUrl: '',
            msg: '',
            img:''
        }
    }

    componentWillMount() {
        let jq = QR.parse(this.props.location.search)
        console.log(jq)
        // console.log(jq.actId)
        //获取动态信息
        fetch("http://106.12.79.128:666/event?pagesize=30&lasttime=1556740526369")
            .then(body => body.json())
            .then(res => {
                let result = res.event.filter(item => item.actId == jq.actId)
                console.log(result[0])
                this.setState({
                    nickname: result[0].user.nickname,
                    avatarUrl: result[0].user.avatarUrl,
                    msg: JSON.parse(result[0].json).msg,
                    img: result[0].user.backgroundUrl
                })
            })
        //获取动态评论
        // console.log(jq.threadId)
        fetch(`http://106.12.79.128:666/comment/event?threadId=${jq.threadId}`)
            .then(body => body.json())
            .then(res => {
                // console.log(res)
                this.setState({
                    comments: res.comments
                })
            })

    }

    back() {
        this.props.history.go(-1)
    }

    render() {
        let { comments } = this.state
        // console.log(comments)
        return (
            // !this.state.detail ? 'loading' : (   
            <div>
                <div className='detail_top'>
                    <span className='detail_back' onClick={this.back.bind(this)}></span>
                    <span className='detail_title'> 动态 </span>
                </div>


                <div>
                    <div className='detail_info'>
                        <img className='detail_info_avatar' src={this.state.avatarUrl} />
                        <h1 className='detail_info_nickname'>{this.state.nickname}</h1>
                    </div>
                    <p className="detail_info_msg">{this.state.msg}</p>
                    <img className="detail_info_img" src={this.state.img} />
                </div>


                <div>
                    <hr />
                    <p className='newComments'>最新评论:</p>
                    <ul>
                        {comments.map(item => <li className='comment_list' key={item.commentId}>
                            <div className='header'>
                                <img className='touxiang' src={item.user.avatarUrl} />
                                <span className='nickname'>{item.user.nickname}</span>
                                {item.liked ? <span className='detail_support2'></span> : <span className='detail_support'></span>}
                            </div>
                            <p className='content'>{item.content}</p>
                            <hr />
                        </li>)}
                    </ul>
                </div>
            </div>
            // )
        )
    }
}

export default Dt_Detail